
<template>
  <div>
      <div class="itemInfo indexGun isPc">
        <p class="img"><router-link tag="a" :to="{path:'/prcList',query: {id:zone}}"><img :src="img"></router-link></p>
        <div class="tabList">
          <div class="block tabBox">
            <el-carousel trigger="click" height="630px" style="background:#fff">
              <el-carousel-item>
                <div v-for="(val,index) in date" :key="val.id" class="gunDiv" v-if="index<100">
                  <div v-if="val.goods_number==0" class="prcNone">
                    <p>售罄</p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id">
                    <img v-lazy="val.goods_logo">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div v-for="(val,index) in date" :key="val.id" class="gunDiv" v-if="5<index&&index<12">
                  <div v-if="val.goods_number==0" class="prcNone">
                    <p>售罄</p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id">
                    <img v-lazy="val.goods_logo">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div v-for="(val,index) in date" :key="val.id" class="gunDiv" v-if="11<index&&index<18">
                  <div v-if="val.goods_number==0" class="prcNone">
                    <p>售罄</p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id">
                    <img v-lazy="val.goods_logo">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <div class="itemInfo indexGunWap isWap">
        <div class="tabList">
          <div class="block tabBox">
            <swiper :aspect-ratio="300/800">
              <swiper-item class="swiper-demo-img" :key="item.id" v-for="item in bannerList">
                <div v-for="(val,index) in date" :key="" :class="{'classA':index==0||index==3||index==6,'classB':index==1||index==4||index==7,'classC':index==2||index==5||index==8}" v-if="(3*item)<=index&index<(3*(item+1))" class="gunDiv">
                  <div v-if="val.goods_number==0" class="prcNoneWap">
                    <p>售罄</p>
                  </div>
                  <div class="wapBuy">
                    <span class="spanA" @click="wapCartOpen"></span>
                    <p class="wapBuyOn"><span class="spanB" @click="PostCart(val)"></span><input v-model="wapBuyNum" type="text" name=""></p>
                  </div>
                  <a target="_blank" :href="'/prcShow?id='+val.id" v-if="index<9">
                    <img v-lazy="val.goods_logo">
                    <p class="title">{{val.goods_name}}</p>
                    <p class="price">£{{val.goods_price|allPrice}}</p>
                  </a>
                </div>
              </swiper-item>
            </swiper>
          </div>
        </div>
      </div>

  </div>
  
</template>

<script>
import { Swiper, SwiperItem} from 'vux'
import {Get,Post} from '@/config/api.js'
export default {
  name: 'hello',
  props:['zone','img','date'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      bannerList:[0,1,2],
      wapBuyNum:1
    }
  },
  components:{
    Swiper, SwiperItem
  },
  methods:{
    //更新购物车信息
    async getNowWap(){
      let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.$store.dispatch("wapCart",data)
    },
    //加入购物车
    async PostCart(val){
      if(this.vLogin()){
        if(this.wapBuyNum<=val.goods_number){
          let date={
            "goods_id":val.id,
            "goods_count":this.wapBuyNum
          }
          this.$store.dispatch("isLoading",true)
          await Post('/carts',this.$store.state.token,date)
          this.$store.dispatch("isLoading",false)
          alert('加入成功！')
          this.getNowWap()
        }else{
          alert('商品库存不足')
          this.wapBuyNum=val.goods_number
        }
      }else{
        this.$router.push({ path: '/login'})
      }
    },
    wapCartOpen(){
      this.wapBuyNum=1
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

.el-carousel__item:nth-child(2n){background: #fff}
.el-carousel__item:nth-child(n){background: #fff}
.el-carousel__arrow{display: none}
.el-carousel__indicator{opacity: 1}

</style>
